<template>
  <div class="common-layout">
    <el-container id="container">
      <el-main>
        <div id="condition">
          <el-button type="primary" @click="handleAdd" size="large">新增</el-button>
        </div>
        <div id="tableDiv">
          <el-table
              id="table"
              :data="tableData"
              border
              size="large"
              table-layout="fixed"
              style="text-align: center">
            <el-table-column prop="mtId" label="类型ID"/>
            <el-table-column prop="mtName" label="类型名称"/>
            <el-table-column label="操作" fixed="right" width="180">
              <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <el-footer>
        <div id="pagination">
          <el-pagination
              style="float:right"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :current-page="currentPage"
              :disabled="false"
              :total="totalCount"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              background layout="total, sizes, prev, pager, next, jumper"/>
        </div>
      </el-footer>
    </el-container>
    <el-dialog
        v-model="addDialog"
        title="新增电影类型"
        width="500"
        align-center
    >
      <el-form
          ref="registerForm"
          label-position="right"
          label-width="auto"
          :model="mType"
          size="large"
          style="max-width: 600px">
        <el-form-item label="用户名:" label-position="right">
          <el-input v-model="mType.mtName" style="width: 240px"
                    placeholder="请输入电影类型名称" clearable/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="doAdd">新增</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ElNotification, ElMessageBox} from "element-plus";
import {ref, reactive, onMounted, inject} from "vue";
import axios from "axios";
import {request2} from "@/request.js";
import {User} from "@element-plus/icons-vue";

const imgPrefix = inject('imgPrefix');

// 查询model
const currentPage = ref(1);
const pageSize = ref(5);
const totalCount = ref(0);
const tableData = reactive([]);

const handleQuery = () => {
  request2({
    url: "/movieType/selectAll?pageNo=" + currentPage.value + "&pageSize=" + pageSize.value,
    method: "get",
    data: null
  }).then(res => {
    if ('200' === res.code && res.data !== null) {
      tableData.splice(0, tableData.length);
      tableData.push(...res.data.list);
      pageSize.value = res.data.pageSize;
      currentPage.value = res.data.pageNo;
      totalCount.value = res.data.totalCount;
    }
  });
};
handleQuery();

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  handleQuery();
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1;
  handleQuery();
};

// 1111111111111111111111111
const addDialog = ref(false);
const mType = reactive({
  mtName: null
})
const handleAdd = () => {
  // 新增操作
  addDialog.value = true;
};

const handleEdit = (row) => {
  ElMessageBox.prompt('修改电影类型', '提示', {
    inputValue: row.mtName,
  }).then(({value}) => {
    // 提交修改
    request2({
      url: "/movieType/update?mtId=" + row.mtId + "&mtName=" + value,
      method: "get",
      data: null
    }).then(res => {
      if ('200' === res.code) {
        ElNotification.success(res.msg);
        handleQuery();
      }
    });
  });
};

const handleDelete = (row) => {
  ElMessageBox.confirm('此操作将永久删除该类型, 是否继续?', '提示', {
    type: 'warning'
  }).then(() => {
    request2({
      url: '/movieType/delete/${row.mtId}',
      method: "post",
      data: null}).then(res => {
      ElNotification.success("删除成功！");
      handleQuery();
    });
  });
};
const doAdd = () => {
  request2({
    url: "/movieType/insert?mtName=" + mType.mtName,
    method: "get",
    data: null
  }).then(res => {
    if ('200' === res.code) {
      ElNotification.success(res.msg);
      addDialog.value = false;
      handleQuery();
    }
  });
}
</script>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

#condition {
  display: flex;
  align-items: flex-start;
  margin: 30px 0;
}

#tableDiv {
  text-align: center;
}

#pagination {
  float: right;
}
</style>
